<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    </head>
    <body>
      <div id="app">
        <p>请选择你要购买的书籍</p>
        <ul>
            <li v-for="(item, data) in arr" :key="item.name"> 
              <span> {{ item.name }} </span> 
              <button @click="fn(data)">买书</button>
            </li>
        </ul>
        <table border="1" width="500" cellspacing="0">
          <tr>
            <th>序号</th>
            <th>书名</th>
            <th>单价</th>
            <th>数量</th>
            <th>合计</th>
          </tr>
          <tr v-for="(item, index) in arr" :key="item.name">
            <td> {{ index + 1 }} </td>
            <td> {{ item.name}} </td>
            <td> {{ item.price }} </td>
            <td> {{ item.count }} </td>
            <td> {{ item.price + item.count}} </td>
          </tr>
        </table>
        <p>总价格为: {{ isAll }}  </p>
      </div>
      <script>
        const app = new Vue({
          el: '#app',
          data: {
            arr: [
              {
                name: "水浒传",
                price: 107,
                count: 0,
              },
              {
                name: "西游记",
                price: 192,
                count: 0,
              },
              {
                name: "三国演义",
                price: 219,
                count: 0,
              },
              {
                name: "红楼梦",
                price: 178,
                count: 0,
              },
            ]
          },
          methods: {
            fn(index) {
                this.arr[index].count++
            }
          },
          computed: {
             isAll() {
               return this.arr.reduce((sum, item) => sum + item.price * item.count, 0)
             }
          }
        })
      </script>
    </body>
    </html>